<!-- 代码卡片组件 -->
<template>
	<div class="code-card" @click="handleClick" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
		<div class="card-content">
			<div class="file-info">
				<div class="file-header">
					<div class="file-icon" :style="{ color: getFileTypeColor }">
						<svg width="32" height="32" viewBox="0 0 30 30" fill="currentColor">
							<path :d="getFileIconPath" />
						</svg>
					</div>
					<div class="file-name" :title="fileName">{{ fileName }}</div>
				</div>
				<div class="file-type" :style="{ color: getFileTypeColor }">{{ fileExtension }}</div>
			</div>
			<div class="kunkun-container">
				<img :src="kunkunImg" alt="KunKun" class="kunkun-image" />
			</div>
		</div>
		<div class="card-overlay">
			<div class="overlay-text">点击查看代码</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import kunkunImg from '@/assets/kunkun.png'

interface Props {
	fileName: string
	codeContent: string
	language?: string
}

interface Emits {
	(e: 'click', data: { fileName: string; codeContent: string; language?: string }): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 提取文件扩展名
const fileExtension = computed(() => {
	const parts = props.fileName.split('.')
	return parts.length > 1 ? `.${parts[parts.length - 1]}` : ''
})

// 根据文件类型获取颜色
const getFileTypeColor = computed(() => {
	const extension = fileExtension.value.toLowerCase()
	const colorMap: Record<string, string> = {
		'.js': '#e1cd18',
		'.jsx': '#61dafb',
		'.ts': '#3178c6',
		'.tsx': '#3178c6',
		'.vue': '#4fc08d',
		'.html': '#e34f26',
		'.css': '#1572b6',
		'.scss': '#cf649a',
		'.sass': '#cf649a',
		'.less': '#1d365d',
		'.json': '#0cd6ed',
		'.xml': '#ff6600',
		'.yml': '#cb171e',
		'.yaml': '#cb171e',
		'.md': '#083fa1',
		'.py': '#3776ab',
		'.java': '#ed8b00',
		'.c': '#a8b9cc',
		'.cpp': '#00599c',
		'.cxx': '#00599c',
		'.cc': '#00599c',
		'.php': '#777bb4',
		'.go': '#00add8',
		'.rs': '#ce422b',
		'.swift': '#fa7343',
		'.kt': '#7f52ff',
		'.dart': '#0175c2',
		'.rb': '#cc342d',
		'.pl': '#39457e',
		'.lua': '#000080',
		'.sh': '#89e051',
		'.ps1': '#012456',
		'.sql': '#336791',
		'.dockerfile': '#384d54',
		'.txt': '#666666',
	}

	return colorMap[extension] || '#666666'
})

// 根据文件类型获取VSCode Icons风格的图标路径
const getFileIconPath = computed(() => {
	const extension = fileExtension.value.toLowerCase()
	const iconMap: Record<string, string> = {
		// JavaScript/TypeScript
		'.js':
			'M18.774,19.7a3.727,3.727,0,0,0,3.376,2.078c1.418,0,2.324-.709,2.324-1.688,0-1.173-.931-1.589-2.491-2.272l-.856-.367c-2.469-1.052-4.11-2.37-4.11-5.156,0-2.567,1.956-4.52,5.012-4.52A5.058,5.058,0,0,1,26.9,10.52l-2.665,1.711a2.327,2.327,0,0,0-2.2-1.467,1.489,1.489,0,0,0-1.638,1.467c0,1.027.636,1.442,2.1,2.078l.856.366c2.908,1.247,4.549,2.518,4.549,5.376,0,3.081-2.42,4.769-5.671,4.769a6.575,6.575,0,0,1-6.236-3.5ZM6.686,20c.538.954,1.027,1.76,2.2,1.76,1.124,0,1.834-.44,1.834-2.15V7.975h3.422V19.658c0,3.543-2.078,5.156-5.11,5.156A5.312,5.312,0,0,1,3.9,21.688Z',
		'.jsx':
			'M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.36-.034-.47 0-.92.014-1.36.034.45-.572.905-1.096 1.36-1.564zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.866.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005 1.177-1.448 2.4-3.816 3.207-.092.03-.18.06-.27.09-.17-.68-.38-1.406-.618-2.187.24-.78.45-1.508.618-2.184.1-.038.19-.077.28-.118v.026zm-13.395.004c.1.042.19.081.29.118.169.677.378 1.405.618 2.187-.24.781-.45 1.507-.618 2.184-.1.04-.19.08-.28.117-.403-.084-.804-.17-1.207-.26-1.732-.74-2.852-1.706-2.852-2.474 0-.768 1.12-1.734 2.852-2.475.382-.16.832-.316 1.336-.479l.06.018zm1.51 5.39c.266.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm6.124 0c.2.392.41.783.64 1.175.225.392.465.774.705 1.145-.695-.102-1.365-.23-2.006-.386.18-.63.405-1.282.66-1.934zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.36.034.47 0 .92-.014 1.36-.034-.45.572-.905 1.096-1.36 1.564-.455-.468-.91-.992-1.36-1.564z',
		'.ts':
			'M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z',
		'.tsx':
			'M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z',
		// Vue
		'.vue': 'M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z',
		// HTML
		'.html':
			'M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z',
		// CSS
		'.css':
			'M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z',
		// SCSS/Sass
		'.scss':
			'M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zM9.6 16.2c0 .6-.3 1.1-.8 1.4-.3.2-.7.3-1.1.3-.8 0-1.4-.4-1.8-1.1l.9-.5c.2.4.5.6.9.6.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5 0-.4-.3-.7-.8-.9-.7-.3-1.2-.7-1.2-1.5 0-.5.2-.9.6-1.2.4-.3.9-.4 1.4-.4.6 0 1.1.2 1.5.6l-.8.6c-.2-.2-.5-.3-.7-.3-.3 0-.5.1-.6.3-.1.1-.1.3-.1.4 0 .3.2.5.6.7.8.3 1.4.8 1.4 1.7zm5.1 0c0 .6-.3 1.1-.8 1.4-.3.2-.7.3-1.1.3-.8 0-1.4-.4-1.8-1.1l.9-.5c.2.4.5.6.9.6.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5 0-.4-.3-.7-.8-.9-.7-.3-1.2-.7-1.2-1.5 0-.5.2-.9.6-1.2.4-.3.9-.4 1.4-.4.6 0 1.1.2 1.5.6l-.8.6c-.2-.2-.5-.3-.7-.3-.3 0-.5.1-.6.3-.1.1-.1.3-.1.4 0 .3.2.5.6.7.8.3 1.4.8 1.4 1.7z',
		'.sass':
			'M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zM9.6 16.2c0 .6-.3 1.1-.8 1.4-.3.2-.7.3-1.1.3-.8 0-1.4-.4-1.8-1.1l.9-.5c.2.4.5.6.9.6.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5 0-.4-.3-.7-.8-.9-.7-.3-1.2-.7-1.2-1.5 0-.5.2-.9.6-1.2.4-.3.9-.4 1.4-.4.6 0 1.1.2 1.5.6l-.8.6c-.2-.2-.5-.3-.7-.3-.3 0-.5.1-.6.3-.1.1-.1.3-.1.4 0 .3.2.5.6.7.8.3 1.4.8 1.4 1.7zm5.1 0c0 .6-.3 1.1-.8 1.4-.3.2-.7.3-1.1.3-.8 0-1.4-.4-1.8-1.1l.9-.5c.2.4.5.6.9.6.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5 0-.4-.3-.7-.8-.9-.7-.3-1.2-.7-1.2-1.5 0-.5.2-.9.6-1.2.4-.3.9-.4 1.4-.4.6 0 1.1.2 1.5.6l-.8.6c-.2-.2-.5-.3-.7-.3-.3 0-.5.1-.6.3-.1.1-.1.3-.1.4 0 .3.2.5.6.7.8.3 1.4.8 1.4 1.7z',
		// JSON
		'.json':
			'M4.014,14.976a2.51,2.51,0,0,0,1.567-.518A2.377,2.377,0,0,0,6.386,13.1,15.261,15.261,0,0,0,6.6,10.156q.012-2.085.075-2.747a5.236,5.236,0,0,1,.418-1.686,3.025,3.025,0,0,1,.755-1.018A3.046,3.046,0,0,1,9,4.125,6.762,6.762,0,0,1,10.544,4h.7V5.96h-.387a2.338,2.338,0,0,0-1.723.468A3.4,3.4,0,0,0,8.709,8.52a36.054,36.054,0,0,1-.137,4.133,4.734,4.734,0,0,1-.768,2.06A4.567,4.567,0,0,1,6.1,16a3.809,3.809,0,0,1,1.992,1.754,8.861,8.861,0,0,1,.618,3.865q0,2.435.05,2.9A1.755,1.755,0,0,0,9.264,25.7a2.639,2.639,0,0,0,1.592.337h.387V28h-.7a5.655,5.655,0,0,1-1.773-.2,2.97,2.97,0,0,1-1.324-.93,3.353,3.353,0,0,1-.681-1.63A24.175,24.175,0,0,1,6.6,22.006,16.469,16.469,0,0,0,6.386,18.9a2.408,2.408,0,0,0-.805-1.361,2.489,2.489,0,0,0-1.567-.524ZM27.986,17.011a2.489,2.489,0,0,0-1.567.524,2.408,2.408,0,0,0-.805,1.361,16.469,16.469,0,0,0-.212,3.109,24.175,24.175,0,0,1-.169,3.234,3.353,3.353,0,0,1-.681,1.63,2.97,2.97,0,0,1-1.324.93,5.655,5.655,0,0,1-1.773.2h-.7V26.04h.387a2.639,2.639,0,0,0,1.592-.337,1.755,1.755,0,0,0,.506-1.186q.05-.462.05-2.9a8.861,8.861,0,0,1,.618-3.865A3.809,3.809,0,0,1,25.9,16a4.567,4.567,0,0,1-1.7-1.286,4.734,4.734,0,0,1-.768-2.06,36.054,36.054,0,0,1-.137-4.133,3.4,3.4,0,0,0-.425-2.092,2.338,2.338,0,0,0-1.723-.468h-.387V4h.7A6.762,6.762,0,0,1,23,4.125a3.046,3.046,0,0,1,1.149.581,3.025,3.025,0,0,1,.755,1.018,5.236,5.236,0,0,1,.418,1.686q.062.662.075,2.747a15.261,15.261,0,0,0,.212,2.947,2.377,2.377,0,0,0,.805,1.355,2.51,2.51,0,0,0,1.567.518Z',
		// Python
		'.py':
			'M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.26-.02.2-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25c-.2 0-.37.09-.5.27-.13.18-.2.39-.2.61 0 .2.07.37.2.51.13.14.3.21.5.21.18 0 .35-.07.48-.21.13-.14.19-.31.19-.51 0-.22-.06-.43-.19-.61-.13-.18-.3-.27-.48-.27z',
		// Java
		'.java':
			'M8.851 18.56s-.917.534.653.714c1.902.218 2.874.187 4.969-.211 0 0 .552.346 1.321.646-4.699 2.013-10.633-.118-6.943-1.149M8.276 15.933s-1.028.761.542.924c2.032.209 3.636.227 6.413-.308 0 0 .384.389.987.602-5.679 1.661-12.007.13-7.942-1.218M13.116 11.475c1.158 1.333-.304 2.533-.304 2.533s2.939-1.518 1.589-3.418c-1.261-1.772-2.228-2.652 3.007-5.688 0-.001-8.216 2.051-4.292 6.573M19.33 20.504s.679.559-.747.991c-2.712.822-11.288 1.069-13.669.033-.856-.373.75-.89 1.254-.998.527-.114.828-.093.828-.093-.953-.671-6.156 1.317-2.643 1.887 9.58 1.553 17.462-.7 14.977-1.82M9.292 13.21s-4.362 1.036-1.544 1.412c1.189.159 3.561.123 5.77-.062 1.806-.152 3.618-.477 3.618-.477s-.637.272-1.098.587c-4.429 1.165-12.986.623-10.522-.568 2.082-1.006 3.776-.892 3.776-.892M17.116 17.584c4.503-2.34 2.421-4.589.968-4.285-.355.074-.515.138-.515.138s.132-.207.385-.297c2.875-1.011 5.086 2.981-.928 4.562 0-.001.07-.062.09-.118M14.401 0s2.494 2.494-2.365 6.33c-3.896 3.077-.888 4.832-.001 6.836-2.274-2.053-3.943-3.858-2.824-5.539 1.644-2.469 6.197-3.665 5.19-7.627M9.734 23.924c4.322.277 10.959-.153 11.116-2.198 0 0-.302.775-3.572 1.391-3.688.694-8.239.613-10.937.168 0-.001.553.457 3.393.639',
		// Markdown
		'.md':
			'M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.31a1.73 1.73 0 01-1.73 1.73zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.077h-2.308l-2.307 2.885-2.308-2.885H3.46v7.846zM21.232 12h-2.309V8.077H16.615V12h-2.307l3.461 4.039z',
		// 其他文件类型
		'.xml':
			'M5.854 4.854a.5.5 0 1 0-.708-.708L3.5 5.793 1.854 4.146a.5.5 0 1 0-.708.708L2.793 6.5 1.146 8.146a.5.5 0 0 0 .708.708L3.5 7.207l1.646 1.647a.5.5 0 0 0 .708-.708L4.207 6.5l1.647-1.646z',
		'.yml':
			'M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.31a1.73 1.73 0 01-1.73 1.73z',
		'.yaml':
			'M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.31a1.73 1.73 0 01-1.73 1.73z',
		'.txt': 'M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z',
		// 默认文件图标
		default: 'M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z',
	}

	return iconMap[extension] || iconMap['default']
})

// 处理点击事件
const handleClick = () => {
	emit('click', {
		fileName: props.fileName,
		codeContent: props.codeContent,
		language: props.language,
	})
}

// 处理鼠标悬浮
const handleMouseEnter = () => {
	// 可以在这里添加悬浮效果的逻辑
}

const handleMouseLeave = () => {
	// 可以在这里添加离开悬浮效果的逻辑
}
</script>

<style scoped lang="scss">
.code-card {
	width: 300px;
	height: 75px;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	margin: 8px 0;

	&:hover {
		transform: translateY(-4px) scale(1.02);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		border-color: #1890ff;

		.card-overlay {
			opacity: 1;
		}

		.kunkun-image {
			transform: scale(1.1) rotate(5deg);
		}

		.file-name {
			color: #1890ff;
		}
	}

	&:active {
		transform: translateY(-2px) scale(1.01);
	}

	.card-content {
		display: flex;
		height: 100%;
		padding: 12px;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}

	.file-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		flex: 1;
		min-width: 0;
		height: 100%;

		.file-header {
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;

			.file-icon {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 18px;
				height: 18px;

				svg {
					width: 100%;
					height: 100%;
					filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
				}
			}

			.file-name {
				font-size: 13px;
				font-weight: 600;
				color: #262626;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				transition: color 0.3s ease;
				line-height: 1.2;
				flex: 1;
				min-width: 0;
			}
		}

		.file-type {
			font-size: 10px;
			color: #8c8c8c;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			flex-shrink: 0;
			padding: 1px 4px;
			background: rgba(0, 0, 0, 0.05);
			border-radius: 3px;
			font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
			align-self: flex-start;
		}
	}

	.kunkun-container {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: linear-gradient(135deg, #ffd93d 0%, #ff9800 100%);
		box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
		overflow: hidden;
		flex-shrink: 0;

		.kunkun-image {
			width: 24px;
			height: 24px;
			object-fit: cover;
			border-radius: 50%;
			transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}
	}

	.card-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(24, 144, 255, 0.9) 0%, rgba(64, 169, 255, 0.9) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 2;

		.overlay-text {
			color: white;
			font-size: 13px;
			font-weight: 600;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
			letter-spacing: 0.3px;
		}
	}

	// 添加一些微妙的动画效果
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		transition: left 0.5s ease;
		z-index: 3;
		pointer-events: none;
	}

	&:hover::before {
		left: 100%;
	}
}
</style>
